<template>
	<view class="container">
		<!-- <view class="form-container">
			<view class="form-item">
				<text class="label">孩子姓名</text>
				<input class="input" v-model="childName" placeholder="请输入孩子姓名"/>
			</view>
			<view class="form-item">
				<text class="label">孩子性别</text>
				<radio-group class="radio-group" v-model="childGender" @change="setGender">
					<label class="radio-label"><radio value="1" />男</label>
					<label class="radio-label"><radio value="2" />女</label>
				</radio-group>
			</view>
			<view class="form-item">
				<text class="label">孩子生日</text>
				<picker class="" style=" flex: 1;"  v-model="childBirth" mode='date' :start=minDate :end=maxDate @change="setBirthDay">
					<view :style="!childBirth?'color:#999;':''">
						{{childBirth?childBirth:'选择'}}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<view class="input-group">
					<input class="input" type="number" v-model="phone" placeholder="请点击获取手机号" maxlength="11" disabled/>
					<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
				</view>
			</view>
			<button class="submit-btn" @click="submitForm">提交预约信息</button>
		</view> -->
		<!-- 底部背景图片 -->
		<image class="bottom-bg" mode="widthFix" :src="inviteInfo.bottom_bg"></image>
		<image class="bottom-form" mode="widthFix" :style="{ top: inviteInfo.bottom_from_top }" :src="inviteInfo.bottom_form"></image>
		<image class="submit-btn-img" @click="submitForm" mode="widthFix" :src="inviteInfo.submit_btn_img"></image>
		
		<input class="input-nickname" v-model="childName" placeholder="请输入姓名"/>
		<radio-group class="radio-gender" v-model="childGender" @change="setGender">
			<label class="radio-label"><radio value="1" />男</label>
			<label class="radio-label"><radio value="2" />女</label>
		</radio-group>
		<picker class="input-birthday" style=" flex: 1;"  v-model="childBirth" mode='date' :start=minDate :end=maxDate @change="setBirthDay">
			<view :style="!childBirth?'color:#8a8383;':''">
				{{childBirth?childBirth:'选择生日'}}
			</view>
		</picker>
		<view class="form-phone">
			<view class="input-group">
				<input class="input" type="number" v-model="phone" maxlength="11" disabled/>
				<button class="input-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<view class="popup-mask" v-if="showQrcodePopup"></view>
		<view class="popup-container" v-if="showQrcodePopup">
			<view class="qrcode-card">
				<text class="popup-title">{{ inviteInfo.popup_title }}</text>
				<text class="popup-subtitle">{{ inviteInfo.popup_subtitle }}</text>
				<view class="qrcode-wrapper">
				<image show-menu-by-longpress class="qrcode-img" :src="qrcodeUrl" mode="widthFix"></image>
				</view>
				<text class="popup-desc">{{ inviteInfo.popup_desc }}</text>
				<button class="close-btn" @click="closePopup">关闭</button>
			</view>
		</view>
  	</view>
</template>

<script>
export default {
	data() {
		return {
			qrcodeId: '',
			qrcodeUrl: '',
			phone: '',
			childName: '',
			childBirth: '',
			childGender: '',
			minDate: '',
			maxDate: '',
			showQrcodePopup: false,
			isRegist: false,
			inviteInfo: '',
		}
	},
	onShow() {
		this.$tools.setStorageOpenid();
		this.getInviteInfo();
	},
	onLoad(options) {
		// 初始化日期选择范围
		const now = new Date()
		this.minDate = new Date(now.getFullYear() - 10, 0).toISOString().slice(0, 7)
		this.maxDate = new Date(now.getFullYear() - 1, 11).toISOString().slice(0, 7)
		// 获取URL中的scene参数并解码
		if (options.scene) {
			// 解码两次：第一次解码%253A为%3A，第二次解码%3A为冒号
			const scene = decodeURIComponent(decodeURIComponent(options.scene))
			// 提取qrcodeId
			const qrcodeMatch = scene.match(/qrcodeId:(\d+)/)
			if (qrcodeMatch && qrcodeMatch[1]) {
				this.qrcodeId = qrcodeMatch[1]
				// 调用接口获取二维码信息
				this.getQrcodeInfo()
			}
		}
		this.checkIsRegist()
	},
	methods: {
		getInviteInfo() {
			const that = this
			that.$http.GET('/app/order/order/getInviteInfo', {}, res => {
				console.log(res)
				that.inviteInfo = res.data
			})
		},
		checkIsRegist() {
			if (!uni.getStorageSync('token')) {
				return
			}
			const that = this
			that.$http.GET('/app/user/info/person', {}, res => {
				if (res.data.registAdminQrcodeUrl) {
					that.qrcodeUrl = res.data.registAdminQrcodeUrl
					that.showQrcodePopup = true
					that.isRegist = true // 标记为已经注册
				}
			})
		},
		getUserPhone() {
			if (!uni.getStorageSync('token')) {
				return
			}
			const that = this
			that.$http.GET('/app/user/info/person', {}, res => {
				console.log('获取用户信息', res);
				that.phone = res.data.phone
			})
		},
		getPhoneNumber(e) {
			// 如果已经注册则直接弹二维码，并且提示已预约
			if (this.isRegist) {
				uni.showToast({ title: '您已预约成功，请添加客服微信', icon: 'none' })
				this.showQrcodePopup = true
				return 
			}
			const that = this
			const openid = uni.getStorageSync('openid') || '';
			this.$http.POST('/app/user/login/getPhoneNumber', { 
				code: e.detail.code, 
				openid: openid,
				registAdminQrcodeId: uni.getStorageSync('lastQrcodeId') || 0,
				registAdminId: uni.getStorageSync('lastAdminId') || 0,
				registChannelId: uni.getStorageSync('lastChannelId') || 0,
				qrcodeId: uni.getStorageSync('lastQrcodeId') || 0,
				darenName: uni.getStorageSync('lastDarenName') || ''
			}, function (res) {
				console.log('成功获取手机号信息', res);
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('refreshToken', res.data.refreshToken);
				uni.removeStorageSync('islogout');
				that.getUserPhone()
				that.$tools.addBehaveLog({
					pages: 'pages/index/activeInvite',
					eventType: 'regist',
				})
			})
		},
		submitForm() {
			// 如果已经注册则直接弹二维码，并且提示已预约
			if (this.isRegist) {
				uni.showToast({ title: '您已预约成功，请添加客服微信', icon: 'none' })
				this.showQrcodePopup = true
				return 
			}
			const that = this
			// 表单验证
			if (!this.phone || !/^1[3-9]\d{9}$/.test(this.phone)) {
				return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
			}
			if (!this.childName) {
				return uni.showToast({ title: '请输入孩子姓名', icon: 'none' })
			}
			if (!this.childBirth) {
				return uni.showToast({ title: '请选择孩子生日', icon: 'none' })
			}
			if (!this.childGender) {
				return uni.showToast({ title: '请选择孩子性别', icon: 'none' })
			}

			try {
				// 提交表单数据
				that.$http.POST('/app/user/info/updateBasicInfo', {
					nickName: this.childName,
					birthday: this.childBirth,
					gender: this.childGender
				}, res => {
					that.showQrcodePopup = true
					that.$tools.addBehaveLog({
						pages: 'pages/index/activeInvite',
						eventType: 'submitForm',
					})
				}, res => {
					uni.showToast({ title: res.message || '提交失败', icon: 'none' })
				})
			} catch (error) {
				console.error('提交失败', error)
				uni.showToast({ title: '网络异常，请重试', icon: 'none' })
			}
		},
		getQrcodeInfo() {
			const that = this
			try {
				that.$http.GET('/app/qrcode/qrcode/getQRCodeInfo', {
					id: this.qrcodeId
				}, res => {
					uni.setStorageSync('lastQrcodeId', that.qrcodeId);
					uni.setStorageSync('lastAdminId', res.data.adminId)
					uni.setStorageSync('lastChannelId', res.data.channelId)
					uni.setStorageSync('lastDarenName', res.data.daren)
					that.qrcodeUrl = res.data.adminQrCode;	
					// 打开页面记录
					console.log('打开页面记录')
					that.$tools.addBehaveLog({
						pages: 'pages/index/activeInvite',
						eventType: 'openPage',
					})


				}, res => {
					console.error('获取二维码信息失败', res)
				})
				
			} catch (error) {
				console.error('接口请求异常', error)
			}
		},
		formatBirthday(dateStr) {
			if (!dateStr) return ''
			// 将 'YYYY-MM' 格式转换为 'YYYY年MM月'
			const [year, month] = dateStr.split('-')
			return `${year}年${month}月`
		},
		setBirthDay(e) {
			this.childBirth = e.detail.value;
		},
		setGender(e) {
			this.childGender = e.detail.value;
		},
		closePopup() {
			this.showQrcodePopup = false
		}
	}
}
</script>

<style scoped>
.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* 底部背景图 - 修改为覆盖全屏 */
.bottom-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  object-fit: cover; /* 覆盖全屏 */
}

.bottom-form {
  position: absolute;
  left: 2vw;
  width: 96vw;
  z-index: 2;
  object-fit: cover; /* 覆盖全屏 */
}

.submit-btn-img {
  	position: absolute;
	top: 170vw;
	left: 5vw;
	width: 90vw;
	z-index: 2;
	object-fit: cover;
}

/* 表单容器 - 确保在底图上方 */
.form-container {
  position: absolute;
  width: 100%;
  /* 使用背景图 */
  background-image: url('https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/invite_form.png');
  background-size: cover;
  background-position: center;
  /* 居中定位 */
  top: 109vw;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 置于背景图之上 */
  z-index: 2;
  /* 原有样式保留 */
  border-radius: 16rpx;
  padding: 60rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

/* 添加弹窗样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.qrcode-card {
  width: 600rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  text-align: center;
}


.form-item {
  margin-bottom: 30rpx;
}

.input-group {
  display: flex;
  gap: 10rpx;
  align-items: center;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  	width: 60vw;
	height: 13vw;
	border-radius: 8rpx;
	padding: 0 20rpx;
	top: 139vw;
	left: 19vw;
	position: absolute;
	z-index: 10;
	font-size: 5vw;
}

.input-nickname {
  	width: 55vw;
    height: 13vw;
    border-radius: 8rpx;
    padding: 0 20rpx;
    top: 95vw;
    left: 16vw;
    position: absolute;
    z-index: 10;
    font-size: 5vw;
}

.input-birthday {
  	width: 55vw;
    height: 16vw;
    border-radius: 8rpx;
    padding: 0 20rpx;
    top: 120vw;
    left: 16vw;
    position: absolute;
    z-index: 10;
    font-size: 5vw;
}

.radio-gender {
  	width: 55vw;
    height: 13vw;
    border-radius: 8rpx;
    padding: 0 20rpx;
    top: 95vw;
    left: 67vw;
    position: absolute;
    z-index: 10;
    font-size: 5vw;
    display: flex;
}

.input-btn {
  	width: 32vw;
    padding: 0px;
    top: 139vw;
    left: 56vw;
	height: 13vw;
    position: absolute;
    z-index: 10;
    font-size: 5vw;
    border: 0;
    color: #089790;
	background-color: #F6F6F6;
}
.input-btn::after {
	border: none;
}

.login-btn {
  height: 80rpx;
  width: 300rpx;
  background-color: #007aff;
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}


.radio-group {
  display: flex;
  gap: 40rpx;
  padding: 20rpx 0;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 30rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #089790;
  color: white;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 20rpx;
}

/* 二维码弹窗样式 */
.qrcode-popup {
  width: 600rpx;
  padding: 40rpx;
  background-color: white;
  border-radius: 16rpx;
  text-align: center;
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.popup-subtitle {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.qrcode-img {
  width: 400rpx;
  height: 400rpx;
  margin: 0 auto 30rpx;
}

.popup-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  display: block;
}

.close-btn {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 40rpx;
  font-size: 30rpx;
}
</style>